<template>
	<view class="zhuanpan_box">
		<u-modal v-model="show" title="挑战大转盘" :content="contentText"></u-modal>
		<!-- <view class="title"></view> -->
		<view class="roulette">
			<!-- <image class="bg" src="@/static/bg_2.png" mode=""></image> -->
			<image :class="{start:isStart,roulette_circle:true}" src="@/static/roulette_circle.png" mode=""></image>
			<image class="line_img" src="@/static/roulette_circle_line.png" mode=""></image>
			<image class="play" src="@/static/roulette_play.png" @click="startZhuanpan" mode=""></image>
			<image class="select" src="@/static/roulette_select.png" mode=""></image>
			<view class="" style="text-align: center;">
				<image class="selected" src="@/static/roulette_selected.png" mode=""></image>
				<span class="select_text">{{contentText}}</span>
			</view> 
			<view class="container">
				<view class="main1 flex">
					<view class="main2">
						<!-- <view class="firstCircle positon center"></view>
						<view class="secondCircle positon center"></view>
						<view class="fourthCircle flex positon center">
							<view class="annulusContent">
								<view class="annulus annulus1"></view>
								<view class="annulus annulus2"></view>
								<view class="annulus annulus3"></view>
								<view class="annulus annulus4"></view>
								<view class="annulus annulus5"></view>
								<view class="annulus annulus6"></view>
								<view class="annulus annulus7"></view>
								<view class="annulus annulus8"></view>
								<view class="annulus annulus9"></view>
								<view class="annulus annulus10"></view>
								<view class="annulus annulus11"></view>
								<view class="annulus annulus12"></view>
								<view class="annulus annulus13"></view>
								<view class="annulus annulus14"></view>
								<view class="annulus annulus15"></view>
								<view class="annulus annulus16"></view>
								<view class="annulus annulus17"></view>
								<view class="annulus annulus18"></view>
								<view class="annulus annulus19"></view>
								<view class="annulus annulus20"></view>
								<view class="annulus annulus21"></view>
								<view class="annulus annulus22"></view>
								<view class="annulus annulus23"></view>
								<view class="annulus annulus24"></view>
								<view class="annulus annulus25"></view>
								<view class="annulus annulus26"></view>
								<view class="annulus annulus27"></view>
								<view class="annulus annulus28"></view>
								<view class="annulus annulus29"></view>
								<view class="annulus annulus30"></view>
								<view class="annulus annulus31"></view>
								<view class="annulus annulus32"></view>
								<view class="annulus annulus33"></view>
								<view class="annulus annulus34"></view>
								<view class="annulus annulus35"></view>
								<view class="annulus annulus36"></view>
							</view>
						</view> -->
						<view class="bar positon flex">
							<view class="line line1"></view>
							<view class="line line2"></view>
							<view class="line line3"></view>
							<view class="line line4"></view>
							<view class="line line5"></view>
							<view class="line line6"></view>
							<view class="line line7"></view>
							<view class="line line8"></view>
							<view class="line line9"></view>
							<view class="line line10"></view>
							<view class="line line11"></view>
						</view>
					</view>
				</view>
			</view>
		
		</view>
		<!-- <view class="rule_text">
				<view class="rule_item">
					1.点击转盘中间开始游戏,转盘开始转动,转盘会随机生成一个结果
				</view>
				<view class="rule_item">
					2.当转盘结束时,会显示此次转盘的结果,玩家根据转盘的结果执行惩罚或者奖励
				</view>
				<view class="">
					3.建议播放紧张氛围的音乐,盯好转盘的结果不许耍赖哦~~~
				</view>
		</view> -->
	</view>
</template>
<script>
	import request from '@/common/request.js';
	import zhuanpan_Data from '@/utils/data/zhuanpan_content.js'
	export default {
		data() {
			return {
				isStart: false,
				punishments: ['喝一杯', '下家喝一杯', '上家喝一杯', '亲一个', '鼻子碰鼻子', '背后抱住对方', '坐在对方腿上'],
				randomNum: 0,
				show: false,
				contentText: '开始转转盘把!'
			}

		},
		onLoad(e) {
			console.log(e, '传参')
			let value = e.item ? e.item.replace("\"([^\"]*)\"", "") : 'base';
			let res = zhuanpan_Data[value]
			if (!res) {
				res = zhuanpan_Data['base']
			}
			
			
			this.punishments = res
			if (value !== 'null'){
				let opts = {
					url: '/api/v1/modeItem/list?modeId=' + value,
					method: 'get'
				};
				uni.showLoading({
					title: '加载中'
				});
				request.httpRequest(opts).then(res => {
					uni.hideLoading();
					if (res.data && res.data.length > 0) {
						// tabData.forEach(tab => {
						// 	tab.modeList = res.data.filter(item => item.gameCode === tab.gameName);
						// })
						// this.punishments=res.data.map(item => item.content);
						this.punishments = res.data.map(item => item.content);
					}
					
				});
			}
		},
		onReady() {
			// this.setBg()
		},
		methods: {
			setBg() {
				const ctx = uni.createCanvasContext('myCanvas', this);
				// 设置canvas的宽度和高度
				canvas.width = window.innerWidth;
				canvas.height = window.innerHeight;

				// 粒子对象
				class Particle {
					constructor(x, y) {
						this.x = x;
						this.y = y;
						this.size = Math.random() * 3 + 1; // 随机大小
						this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 随机颜色
						this.velocityY = Math.random() * 3 + 1; // 随机竖直速度
					}

					// 更新粒子的位置
					update() {
						this.y += this.velocityY;

						// 当粒子到达画布底部时，重新放置到画布顶部
						if (this.y > canvas.height) {
							this.y = 0;
						}
					}

					// 绘制粒子
					draw() {
						ctx.beginPath();
						ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
						ctx.fillStyle = this.color;
						ctx.fill();
					}
				}

				// 创建粒子数组
				const particles = [];
				const numParticles = 100;

				// 初始化粒子
				for (let i = 0; i < numParticles; i++) {
					const x = Math.random() * canvas.width;
					const y = Math.random() * canvas.height;
					particles.push(new Particle(x, y));
				}
				// 动画循环函数
				function animate() {
					ctx.clearRect(0, 0, canvas.width, canvas.height);

					for (let i = 0; i < particles.length; i++) {
						particles[i].update();
						particles[i].draw();
					}

					requestAnimationFrame(animate);
				}

				// 启动动画
				animate();


			},
			getRanDom() {

			},
			startZhuanpan() {
				if (this.isStart) return
				this.isStart = true
				let startTime = Date.parse(new Date())
				//写个循环5s,
				let i = 0
				let intervaFunc = setInterval(() => {
					let endTime = Date.parse(new Date())
					if (endTime - startTime === 3000 || endTime - startTime > 3000) {
						console.log()
						clearInterval(intervaFunc);
						this.isStart = false
						this.show = true;
					}
					if (i > this.punishments.length - 1) i = 0
					console.log(this.punishments[i], i)
					this.contentText = this.punishments[i]
					i++;
				}, 100)
				// 清空循环,设置值
				this.contentText = this.punishments[index]
			},
		}

	}
</script>
<style scoped>
	.zhuanpan_box{
			font-family: 'Poppins', sans-serif;
	}
	page{
	/* background: linear-gradient(#fdb1d4, #c4d4f1); */
	overflow: hidden;
	}
	.content_text {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 38rpx;
		background-color: #fff;
		color: pink;
		text-align: center;
	}

	.roulette {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
		/* padding-top:80rpx; */
		/* background-image: linear-gradient(to right top, #79277e, #6d2571, #612265, #552059, #4a1d4d, #4a1d4d, #4a1d4d, #4a1d4d, #552059, #612265, #6d2571, #79277e);        */
	}
	
	@keyframes move {
	    0% {
	        transform: translate(-30%, -50%);
	    }
	    100% {
	        transform: translate(-70%, -50%);
	    }
	}
	.bg {
		height: 100vh;
		width: 100vw;
	}


	.roulette_circle {
		position: absolute !important;
		top: 10rpx;
		width: 800rpx;
		height: 800rpx;
		/* animation: rotate 5s linear infinite; */
		/* transition: transform 10s ease-in-out; */
		z-index: 17;
	}

	.start {
		animation: rotate 3s ease-out infinite;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}




	.line_img {
		position: absolute !important;
		top: 10rpx;
		width: 800rpx;
		height: 800rpx;
		z-index: 18;
	}

	.play {
		position: absolute !important;
		top: 345rpx;
		left: 315rpx;
		width: 125rpx;
		height: 125rpx;
		z-index: 20;
	}

	.select {
		position: absolute !important;
		top: 81rpx;
		left: 293rpx;
		width: 165rpx;
		height: 350rpx;
		z-index: 19;
	}

	.selected {
		position: absolute !important;
		top: -50rpx;
		left: 80rpx;
		width: 600rpx;
		height: 200rpx;
		z-index: 19;
	}

	.select_text {
		position: absolute !important;
		top: 0px;
		left: 175rpx;
		width: 420rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 150rpx;
		z-index: 22;
	}

	.container {
		width: 300rpx;
		height: 300rpx;
		position:absolute;
		top:600rpx;
		left:25rpx;        transform: scale(1.7);

	}

	.main1 {
		width: 500rpx;
		height: 500rpx;
		transform: translateZ(-150rpx);
		transform-style: preserve-3d;
	}

	.main2 {
		width: 300rpx;
		height: 300rpx;
		transform-style: preserve-3d;
		transform: rotateX(60deg);
		position: relative;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.positon {
		position: absolute;
	}

	.center {
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	.firstCircle {
		width: 400rpx;
		height: 400rpx;
		border-radius: 50%;
		border: 3rpx solid rgb(42, 153, 255);
	}

	.secondCircle {
		width: 350rpx;
		height: 350rpx;
		border-radius: 50%;
		border: 10rpx solid rgb(42, 153, 255);
		border-color: rgb(42, 153, 255) transparent;

		animation: rotate1 3s linear infinite;
	}

	.thirdCircle {}

	.fourthCircle {
		width: 300rpx;
		height: 300rpx;
		transform: translateX(-50%) translateY(-50%) translateZ(30rpx);
		animation: rotate2 3s linear infinite;
	}

	.annulusContent {
		width: 100%;
		height: 100%;
		position: relative;
		transform-style: preserve-3d;
	}

	.bar {
		width: 280rpx;
		height: 300rpx;
		background: transparent;
		top: 50%;
		left: 50%;
		transform: translateZ(150rpx) translateX(-50%) translateY(-50%) rotateX(90deg);
		display: flex;
		gap: 20rpx;
		overflow: hidden;
	}

	.line {
		width: 3rpx;
		height: 100rpx;
		background: linear-gradient(to top,
				rgb(69, 164, 254),
				rgba(42, 153, 255, 0.1));
	}

	.line1 {
		animation: line1 1s linear infinite;
	}

	.line2 {
		animation: line1 0.5s 0.2s linear infinite;
	}

	.line3 {
		animation: line1 1.5s 0.5s linear infinite;
	}

	.line4 {
		animation: line1 1.3s 1s linear infinite;
	}

	.line5 {
		animation: line1 1.6s 0.3s linear infinite;
	}

	.line6 {
		animation: line1 2s 0.4s linear infinite;
	}

	.line7 {
		animation: line1 1.2s 0.6s linear infinite;
	}

	.line8 {
		animation: line1 1.1s 1.1s linear infinite;
	}

	.line9 {
		animation: line1 1.9s 0.9s linear infinite;
	}

	.line10 {
		animation: line1 1.7s 1.3s linear infinite;
	}

	.line11 {
		animation: line1 1.3s 1.1s linear infinite;
	}

	.line12 {
		animation: line1 1.4s 0.4s linear infinite;
	}

	.annulus {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
		background: conic-gradient(rgb(69, 164, 254) 0,
				rgb(69, 164, 254) 2%,
				transparent 2%);
		border-radius: 50%;
		-webkit-mask: radial-gradient(transparent,
				transparent 57%,
				#000 57%,
				#000 100%);
	}

	.annulus1 {
		transform: translateX(-50%) translateY(-50%) rotateZ(10deg);
	}

	.annulus2 {
		transform: translateX(-50%) translateY(-50%) rotateZ(20deg);
	}

	.annulus3 {
		transform: translateX(-50%) translateY(-50%) rotateZ(30deg);
	}

	.annulus4 {
		transform: translateX(-50%) translateY(-50%) rotateZ(40deg);
	}

	.annulus5 {
		transform: translateX(-50%) translateY(-50%) rotateZ(50deg);
	}

	.annulus6 {
		transform: translateX(-50%) translateY(-50%) rotateZ(60deg);
	}

	.annulus7 {
		transform: translateX(-50%) translateY(-50%) rotateZ(70deg);
	}

	.annulus8 {
		transform: translateX(-50%) translateY(-50%) rotateZ(80deg);
	}

	.annulus9 {
		transform: translateX(-50%) translateY(-50%) rotateZ(90deg);
	}

	.annulus10 {
		transform: translateX(-50%) translateY(-50%) rotateZ(100deg);
	}

	.annulus11 {
		transform: translateX(-50%) translateY(-50%) rotateZ(110deg);
	}

	.annulus12 {
		transform: translateX(-50%) translateY(-50%) rotateZ(120deg);
	}

	.annulus13 {
		transform: translateX(-50%) translateY(-50%) rotateZ(130deg);
	}

	.annulus14 {
		transform: translateX(-50%) translateY(-50%) rotateZ(140deg);
	}

	.annulus15 {
		transform: translateX(-50%) translateY(-50%) rotateZ(150deg);
	}

	.annulus16 {
		transform: translateX(-50%) translateY(-50%) rotateZ(160deg);
	}

	.annulus17 {
		transform: translateX(-50%) translateY(-50%) rotateZ(170deg);
	}

	.annulus18 {
		transform: translateX(-50%) translateY(-50%) rotateZ(180deg);
	}

	.annulus19 {
		transform: translateX(-50%) translateY(-50%) rotateZ(190deg);
	}

	.annulus20 {
		transform: translateX(-50%) translateY(-50%) rotateZ(200deg);
	}

	.annulus21 {
		transform: translateX(-50%) translateY(-50%) rotateZ(210deg);
	}

	.annulus22 {
		transform: translateX(-50%) translateY(-50%) rotateZ(220deg);
	}

	.annulus23 {
		transform: translateX(-50%) translateY(-50%) rotateZ(230deg);
	}

	.annulus24 {
		transform: translateX(-50%) translateY(-50%) rotateZ(240deg);
	}

	.annulus25 {
		transform: translateX(-50%) translateY(-50%) rotateZ(250deg);
	}

	.annulus26 {
		transform: translateX(-50%) translateY(-50%) rotateZ(260deg);
	}

	.annulus27 {
		transform: translateX(-50%) translateY(-50%) rotateZ(270deg);
	}

	.annulus28 {
		transform: translateX(-50%) translateY(-50%) rotateZ(280deg);
	}

	.annulus29 {
		transform: translateX(-50%) translateY(-50%) rotateZ(290deg);
	}

	.annulus30 {
		transform: translateX(-50%) translateY(-50%) rotateZ(300deg);
	}

	.annulus31 {
		transform: translateX(-50%) translateY(-50%) rotateZ(310deg);
	}

	.annulus32 {
		transform: translateX(-50%) translateY(-50%) rotateZ(320deg);
	}

	.annulus33 {
		transform: translateX(-50%) translateY(-50%) rotateZ(330deg);
	}

	.annulus34 {
		transform: translateX(-50%) translateY(-50%) rotateZ(340deg);
	}

	.annulus35 {
		transform: translateX(-50%) translateY(-50%) rotateZ(350deg);
	}

	.annulus36 {
		transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
	}

	@keyframes rotate1 {
		0% {
			transform: translateZ(20rpx) translateX(-50%) translateY(-50%) rotateZ(0deg);
		}

		100% {
			transform: translateZ(20rpx) translateX(-50%) translateY(-50%) rotateZ(-360deg);
		}
	}

	@keyframes rotate2 {
		0% {
			transform: translateX(-50%) translateY(-50%) translateZ(30rpx) rotateZ(0deg);
		}

		100% {
			transform: translateX(-50%) translateY(-50%) translateZ(30rpx) rotateZ(360deg);
		}
	}

	@keyframes line1 {
		0% {
			transform: translateY(-220rpx);
		}

		100% {
			transform: translateY(220rpx);
		}
	}
	.rule_text{
		font-size:37rpx;
		color:#fff;
		padding:10rpx;
		font-weight:600;
		position: absolute;
		top:1200rpx;
	}
</style>